<template>
  <div id="app">
    <!-- 顶部直通车  -->
    <!-- 组件重载原理:让组件的key属性发生变化 -->
    <!-- 路由切换的时候, 让组件重载 -->
    <TopBar :key="topBarKeyValue"></TopBar>
    <!-- 头部(Logo Nav Search) -->
    <Header></Header>
    <router-view @fn="reloadTopBar"/>
    <!-- 页尾 -->
    <Footer></Footer>

    <!-- 登录模态窗口组件 -->
    <Login v-show="isShowLoginModal"></Login>

    <!-- 提示框组件的调用 -->
    <transition name="fade">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>
<script>
import TopBar from "@/components/TopBar"
import Header from "@/components/Header"
import Footer from "@/components/Footer"
import Login from "@/components/Login"
import Toast from "@/components/Toast"
import {mapState} from "vuex"
export default{
  data(){
    return{
        topBarKeyValue:1
    }
  },
  methods:{
    reloadTopBar(){
      this.topBarKeyValue++
    }
  },
  watch:{
    "$route.path":{
      handler(newVal,oldVal){
        if(newVal !== oldVal){
          // console.log("执行路由重载!!!!!!!1",newVal,oldVal);
          // 两个值不相等说明切换了,
          // 就可以让topBarKeyValue发生变化
          // 即组件就重载了
          this.topBarKeyValue++

        }
      }
    }
  },
  computed:{
    ...mapState({
      isShowLoginModal:state=>state.showLoginModal.isShowLoginModal,
      isShowToast:state=>state.showToast.isShowToast
    })
  },
  components:{
    TopBar,Header,Footer,Login,Toast
  }
}
</script>

<style lang="less" >
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

/* 进场时候的初始状态, 离场的结束状态 */
.fade-enter, .fade-leave-to{
  opacity:0
}
/* 定义过渡属性 */
.fade-enter-active,.fade-leave-active{
  transition: all .5s linear;
}
/* 进场时候的结束状态 == 离场的初始状态 */
.fade-enter-to, .fade-leave{
  opacity:1
}
</style>
